<script setup>
	import {
		ref,
		onMounted
	} from 'vue';

	import {
		getParticipationRecords
	} from '@/common/api.js'
	import dayjs from 'dayjs';
	import request from '@/utils/request';

	onMounted(() => {
		userId.value = uni.getStorageSync('userId')
		getRecords(0, "all");
	})
	const userId = ref();
	const getRecords = (statusId, date) => {
		getParticipationRecords({
			"statusId": statusId,
			"date": date
		}).then((res) => {
			console.log(res)
			recordData.value = res.data
		})
	}

	// 初始化选项
	const statusOptions = ref([{
			label: '全部',
			value: 0
		},
		// {
		// 	label: '待审核',
		// 	value: 1
		// },
		{
			label: '通过',
			value: 2
		},
		{
			label: '未通过',
			value: 3
		}
	]);
	const dateOptions = ref([{
			label: '全部',
			value: 'all'
		},
		{
			label: '今日',
			value: 'today'
		},
		{
			label: '昨日',
			value: 'yesterday'
		},
		{
			label: '近30天',
			value: 'last30day'
		}
	]);

	// 默认选中值
	const selectedStatus = ref(0);
	const selectedDate = ref('all');

	// 点击选项时更新选中状态
	const selectOption = (type, value) => {
		if (type === 'status') {
			selectedStatus.value = value;
		} else if (type === 'date') {
			selectedDate.value = value;
		}
		// 触发就要去查询最新的数据
		getRecords(selectedStatus.value, selectedDate.value);
	}
	/**
	 * 后端获取记录（根据用户id查数据）
	 * 审核时间、审核状态、店铺名称、提交平台、提交时间、订单编号、红包类型、红包金额、上传图片
	 */

	// 根据审核状态显示不同的颜色
	const recordData = ref([]);
	const getStatusStyle = (status) => {
		switch (status) {
			case 1:
				return {
					color: '#ffa200'
				};
			case 2:
				return {
					color: '#28a745'
				};
			case 3:
				return {
					color: '#dc3545'
				};
			default:
				return {
					color: '#6c757d'
				};
		}
	};
	// 获取审核状态对应文字
	const getAuditStatusText = (status) => {
		switch (status) {
			case 1:
				return '待审核';
			case 2:
				return '已通过';
			case 3:
				return '未通过';
			default:
				return '未知状态';
		}
	};
	// 重新提交记录
	const resubmit = (orderNumber) => {
		uni.showModal({
			title: '提示',
			content: `确定重新提交订单编号为${orderNumber}的提交记录吗？`,
			success: (res) => {
				if (res.confirm) {
					// 用户点击“确认”，跳转页面
					uni.navigateTo({
						url: `/pages/user_submit_evaluation/user_submit_evaluation?orderNumber=${orderNumber}`,
						fail: (err) => {
							console.error('跳转失败:', err);
							uni.showToast({
								title: '跳转失败，页面异常',
								icon: 'none'
							});
						},
					});

				}
			}
		});

	}
	// 预览图片
	const previewImage = (current, total) => {
		const urls = total.map((item) => {
			return request.defaults.baseURL + "/uploads/users/" + userId.value + item;
		});
		// console.log(current, urls);
		uni.previewImage({
			current: current,
			urls: urls
		})
	}
</script>
<template>
	<view class="box">
		<view class="top-box">
			<!-- 状态选择 -->
			<view class="top-itembox">
				<up-row justify="space-between" gutter="0">
					<up-col span="3">
						<view class="box-wrapper">
							<view class="option-text">状态选择:</view>
						</view>
					</up-col>
					<up-col v-for="(item,idx) in statusOptions" :key="idx" :span="2"
						@click="selectOption('status', item.value)">
						<view class="box-wrapper" :class="{ 'active': selectedStatus === item.value }">
							<view class="option-text">{{ item.label }}</view>
						</view>
					</up-col>
					<up-col span="2">
						<up-text text=""></up-text>
					</up-col>
				</up-row>
			</view>
			<!-- 日期筛选 -->
			<view class="top-itembox">
				<up-row justify="space-between" gutter="0">
					<up-col span="3">
						<view class="box-wrapper">
							<view class="option-text">日期筛选:</view>
						</view>
					</up-col>
					<up-col v-for="(item,idx) in dateOptions" :key="idx" :span="2"
						@click="selectOption('date', item.value)">
						<view class="box-wrapper" :class="{ 'active': selectedDate === item.value }">
							<view class="option-text">{{ item.label }}</view>
						</view>
					</up-col>
				</up-row>
			</view>
		</view>
		<view class="main-box">
			<view class="main-box-item" v-for="(item,idx) in recordData" :key="idx">
				<view class="item-header">
					<view class="item-title">审核时间：{{ item.auditTime?dayjs(item.auditTime).format("YYYY-MM-DD HH:mm:ss"):"审核暂未通过" }}</view>
					<view class="item-status" :style="getStatusStyle(item.auditStatus)">
						{{ getAuditStatusText(item.auditStatus) }}
					</view>
				</view>
				<view style="margin: 20rpx 0 20rpx 0;"><up-line color="#a6b3bf"></up-line></view>
				<view class="item-main">
					<view class="item-flex">
						<view class="item-shop">店铺名称：{{ item.shopName }}</view>
						<view class="item-type">{{ item.redPacketType ? item.redPacketType : "随机红包" }}</view>
					</view>
					<view class="item-flex">
						<view class="item-platform">提交平台：{{ item.submitPlatform }}</view>
						<view class="item-amount">￥{{ item.redPacketAmount }}</view>
					</view>
					<view class="item-time">提交时间：{{ dayjs(item.submitTime).format("YYYY-MM-DD HH:mm:ss")	}}
					</view>
					<view class="item-order item-flex">
						<view>订单编号：{{ item.orderNumber }}</view>
					</view>
					<view class="item-images">
						<!-- 图片盒子 -->
						<view class="item-images-contain">
							<view class="item-images-item" v-for="(img, idx) in item.uploadImages" :key="idx">
								<up-image :src="`${request.defaults.baseURL}/uploads/record/${userId}/${img}`"
									:lazy-load="true" width="130rpx" height="150rpx" mode="scaleToFill"
									@error="(err)=>console.log(err.detail.errMsg)"
									@click="previewImage(idx,item.uploadImages)">
								</up-image>
							</view>
						</view>
						<!-- 按钮 -->
						<view>
							<up-button type="error" size="small" text="重新提交" @click="resubmit(item.orderNumber)"
								v-if="item.auditStatus === 3">
							</up-button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<style lang="scss" scoped>
	.box {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f0f0f0;
	}

	.top-box {
		padding: 30rpx 15rpx 30rpx 15rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
	}

	.top-itembox {
		margin-top: 10rpx;
	}

	.box-wrapper {
		padding: 10rpx 15rpx;
		border-radius: 5rpx;
		text-align: center;
		transition: background-color 0.1s, color 0.1s;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.box-wrapper.active {
		background-color: #f62c33;
		color: #e6e6e6;
	}

	.option-text {
		font-size: 27rpx;
	}

	.main-box {
		flex: 1;
		/* 撑满剩下的空间 */
		background-color: #F6F6F6;
	}

	.main-box-item {
		margin: 20rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
		padding: 20rpx;
		background-color: #ffffff;
	}

	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.item-main {
		color: #666666;
		font-size: 30rpx;
	}

	.item-type {
		color: #0F0F0F;
	}

	.item-amount {
		color: #0F0F0F;
	}

	.item-images {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.item-images-contain {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}

	.item-images-item {
		width: 130rpx;
		height: 150rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
		margin-bottom: 10rpx;
	}

	.item-flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>